{{#>base title=data.page.form}}

{{#*inline "pageContent"}}

    <div class="row">
        <div class="col-md-12">
            <h3 class="page-title">
                {{data.page.form}}
            </h3>

            {{>fixtures/tabs-form form-submit=true}}
        </div>
    </div>

    <div class="row">

        <div class="col-md-12">

            <div class="portlet box default ">
                <div class="portlet-title">
                    <div class="caption">
                        表单提交
                    </div>
                </div>
                <div class="portlet-body form form-page">
                    <form action="#" id="form_sample_1">
                        <div class="form-body">

                            <div class="form-group">
                                <label>Text
                                </label>
                                <div>
                                    <input type="text" name="text" data-required="1" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Textarea

                                </label>
                                <div>
                                    <textarea name="textarea" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Select</label>

                                <select name="select" class="form-control">
                                    <option value="">select...</option>
                                    <option value="1">一</option>
                                    <option value="2">二</option>
                                    <option value="3">三</option>
                                    <option value="4">四</option>
                                    <option value="6">五</option>
                                </select>

                            </div>
                            <div class="form-group">
                                <label>Radio</label>
                                <div class="radio-list">
                                    <label class="radio-inline">
                                        <input type="radio" name="radio" value="1"> Option 1
                                    </label>

                                    <label class="radio-inline">
                                        <input type="radio" name="radio" value="2"> Option 2
                                    </label>

                                    <label class="radio-inline">
                                        <input type="radio" name="radio" value="3"> Option 3
                                    </label>
                                </div>
                                <span for="radio"  class="help-block"></span>
                            </div>

                            <div class="form-group">
                                <label>Checkboxes</label>
                                <div class="checkbox-list">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" name="checkbox" value="1" /> Checkbox 1
                                    </label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" name="checkbox" value="2" /> Checkbox 2
                                    </label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" name="checkbox" value="3" /> Checkbox 3
                                    </label>
                                </div>
                                <span for="checkbox"  class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button type="button" id="btn_submit" class="btn green">Submit</button>
                            <button type="button" class="btn default">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="markdown">
                <h3>Javascript代码</h3>
    <pre><code class="javascript">$p.com.form("#form_sample_1", {
//表单验证
validate: {
    rules: {
        text: {
            maxlength: 128,
            required: true,
            validString: true
        },
        radio: {
            required: true
        },
        checkbox: {
            required: true
        }
    },
        //自定义验证
    custom: function(data, form) {
            $p.log("自定义验证");
            return true;
    }
},
//提交按钮
submitButton: "#btn_submit",
//提交接口
submitModelEvent: model.add,
//接口参数
submitModelParams: function(params, callback) {
    //新增参数项，回调函数
    return [params, callback];
},
//数据格式化
submitDataFormat: function(data, form) {
    var _data = [];
    //格式化后的数据
    for (var i = 0; i < data.length; i++) {
    if (data[i].name == 'checkbox') {
        _data.push({
            name: "checkboxes",
            value: {
                id: data[i].value,
                title: data[i].name
            },
            //当checkbox只选中一项的时候,提交的时候会当做Object{}处理
            //属性type: "array",是为了让该字段当做Array[]处理
            type: "array"
        });
        continue;
    }

    _data.push(data[i]);
    }
    return _data;
},
//提交成功
submitSuccess: function(resp, valid) {
    $p.alert(resp.message);
},
//提交失败
submitError: function(resp, valid) {
    $p.alert(resp.message, "error");
}
});</code></pre>
            </div>
        </div>
    </div>
{{/inline}}

{{#*inline "appScript"}}
<script type="text/javascript">
    pagurian.call("modules/form/app", function(app) {
        app.page.submit();
    });
</script>
{{/inline}}

{{/base}}
